/**
文件上传组件

属性：
  tooltipPlacement:String,提示文本显示位置，默认top
  type:String,上传类型，默认：'file','image','video'
事件：
  change(files):当文件被选择后触发，参数为files:Array，TODO: 可以考虑先上传完成后返回files中带上url
 */
<template>
<span>
  <el-tooltip :content="tooltipTitle" :placement="tooltipPlacement" :enterable="false">
    <i :class="iconClass+' chat-tool-btn'" @click="$refs.uploadFile.click()" />
    
  </el-tooltip>
  <input
      type="file"
      ref="uploadFile"
      style="display:none"
      :accept="accept"
      @change="onChange"
      multiple
    />
</span>
</template>

<script>
export default {
  model:{
    methods:["change"]
  },
  props:{
    tooltipPlacement:{type:String,default:'top'},
    type:{type:String,default:'file',validator:function(val){
      if(['file','image','video'].indexOf(val)<0){
        console.error('错误',"组件UploadFile的type属性只能是file','image','video'")
        return false
      }
      return true
    }},
  },
  computed:{
    iconClass(){
      if (this.type=="file"){
        return "el-icon-folder-opened"
      }
      if (this.type=="image"){
        return "el-icon-picture-outline"
      }
      if (this.type=="video"){
        return "el-icon-video-camera"
      }
    },
    tooltipTitle(){
      if (this.type=="file"){
        return "上传文件"
      }
      if (this.type=="image"){
        return "上传图片"
      }
      if (this.type=="video"){
        return "上传视频"
      }
    },
    accept(){
      if (this.type=="file"){
        return "*"
      }
      if (this.type=="image"){
        return "image/*"
      }
      if (this.type=="video"){
        return "video/*"
      }
    }
  },
  methods:{
    onChange(e){
      this.$emit("change", e.target.files);
    }
  }
}
</script>

<style lang="less" scoped>
.chat-tool-btn {
  cursor: pointer;
  margin-right: 10px;
}
</style>